<template>
  <div class="Stock">
    <el-row>
      <el-col :span="24" class="TextAlignL">
        <h2 style="color: #666;">退货库存</h2>
      </el-col>
      <el-col :span="24">
        <el-form ref="conditionForm" :model="conditionForm" label-position="left" label-width="80px">
          <el-row :gutter="20" type="flex" class="row-bg">
            <el-col :span="6">
              <el-form-item label="物料代码">
                <el-input v-model="conditionForm.FNumber" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="名称">
                <el-input v-model="conditionForm.FName" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规格型号">
                <el-input v-model="conditionForm.FModel" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="" style="margin-top: 7px;">
              <el-button size="mini" type="primary" @click="search">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24" style="width: 100%;height: 4px; border-bottom: 1px dashed #ccc;">
      </el-col>
      <el-col :span="24" class="MarginT_20">
        <el-table id="out-table"
          :data="dataList"
          v-loading="listLoading"
          style="width: 100%">
          <el-table-column
            type="index"
            fixed="left"
            width="50">
          </el-table-column>
          <el-table-column
            property="FNumber"
            label="物料代码"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FName"
            label="名称"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FModel"
            label="规格">
          </el-table-column>
          <el-table-column
            property="funit"
            label="单位"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FQty"
            label="数量"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" class="TextAlignR MarginT_20" v-if="dataList.length > 0">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="curPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="sum">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getQueryParams } from '../util/utils'

export default {
  name: 'ReturnInventory',
  data () {
    return {
      listLoading: false,
      dataList: [],
      conditionForm: {
        FNumber: '',
        fbillno: '',
        FModel: ''
      },
      curPage: 1,
      sum: 0,
      curRow: null
    }
  },
  computed: {
    ...mapState({
      fsupplierid: state => state.fsupplierid,
      f104: state => state.f104
    })
  },
  components: {
  },
  created () {
    this.search()
  },
  methods: {
    search () {
      this.curPage = 1
      this.getStockList()
    },
    handleCurrentChange () {
      this.getStockList()
    },
    getStockList () {
      this.listLoading = true
      let formatData = getQueryParams({...this.conditionForm, ...{fsupplier: this.fsupplierid, f104: this.f104}}, {current: this.curPage, pageSize: 10})
      this.Http.get('/yw_supplier_user/ywSupplierUser/getItem', formatData
      ).then(res => {
        if (res.data.success) {
          this.dataList = res.data.result.records
          this.sum = res.data.result.total
          this.listLoading = false
        }
      }).catch((error) => {
        console.log(error)
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
@Padding: 24px;
.Stock{
  width: calc(100% - 2*@Padding);
  background: #fff;
  padding: 0 @Padding @Padding @Padding;
  margin-top: @Padding;
}
</style>
